<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8" />

	<title>Demo Chat</title>

	<link href="LK-xxxxx/bootstrap.css" rel="stylesheet">

	<style>
		body {
			padding: 20px;
		}

		#console {
			height: 400px;
			overflow: auto;
		}

		#console-response {
			height: 200px;
			overflow: auto;
		}

		.username-msg {
			color: orange;
		}

		.connect-msg {
			color: green;
		}

		.disconnect-msg {
			color: red;
		}

		.send-msg {
			color: #888
		}
	</style>


	<script src="LK-xxxxx/js/socket.io/socket.io.js"></script>
	<script src="LK-xxxxx/js/moment.min.js"></script>
	<script src="LK-xxxxx/js/jquery-1.10.1.min.js"></script>

	<script>

		var userName = 'user' + Math.floor((Math.random() * 1000) + 1);

		// 前端的ip这个怎可解决呢？
		var socket = io.connect('http://localhost/LK-xxxxx/ws', {
			transports: ['polling', 'websocket']
		});

		socket.on('connect', function () {
			output('<span class="connect-msg">Client has connected to the server!</span>');
		});

		socket.on('chatevent', function (data) {
			output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
		});

		socket.on('disconnect', function () {
			output('<span class="disconnect-msg">The client has disconnected!</span>');
		});

		function sendDisconnect() {
			socket.disconnect();
		}

		function sendConnect() {
			socket.connect();
		}

		function sendMessage() {
			var message = $('#msg').val();
			$('#msg').val('');

			var jsonObject = {
				userName: userName,
				message: message
			};
			socket.emit('chatevent', jsonObject);
			var currentTime1 = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
			var element1 = $("<div>" + currentTime1 + " " + message + "</div>");
			$('#console').prepend(element1);
		}

		function output(message) {
			var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
			var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').prepend(element);
		}

		$(document).keydown(function (e) {
			if (e.keyCode == 13) {
				$('#send').click();
			}
		});
	</script>
</head>

<body>

	<h1>Netty-socketio Demo Chat</h1>

	<br />

	<div id="console" class="well">
	</div>

	<form class="well form-inline" onsubmit="return false;">
		<input id="msg" class="input-xlarge" type="text" placeholder="Type something..." />
		<button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
		<button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
		<button type="button" onClick="sendConnect()" class="btn">Connect</button>
	</form>

	<div id="console-response" class="well">
	</div>


</body>

</html>